<template>
    <div class="body login">
        <!--<div class="backbox"></div>-->
        <div class="backtop">
            <img src="../img/newlogo.png" alt="">
        </div>
        <!--<div class="lo_title">登录</div>-->
        <div class="form_li" style="margin-top: 0.8rem;">
            <span class="icon_phone"></span>
            <input type="text" placeholder="请输入手机号码" @blur="btmoffshow=false" @focus="btmoffshow=false" v-model="username">
        </div>
        <div class="form_li" style="text-align: center;">
            <span class="icon_password"></span>
            <input type="password" style="width: 2.8rem;text-align: left;" @blur="btmoffshow=false" @focus="btmoffshow=false" placeholder="请输入验证码" v-model="password">
            <input class="yanzheng" type="button" style="text-align: center;" @click="getyanzhang()" value="" v-model="yanzhnegma"/>
        </div>
        <div class="lo_btn" @click="denglu">登录</div>
        <div class="xieyibtn">*登陆即同意微金网<router-link to="/xieyi">用户注册协议</router-link></div>
        <div class="log_btm" v-show="btmoffshow"><div></div></div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "login",
        data(){
            return {
                username:"",
                password:"",
                userid:"",
                yanzhnegma:"验证码",
                btmoffshow:true
            }
        },

        beforeCreate(){
            this.$store.state.navTabstatu = 1
        },
        mounted(){
            console.log(this.common.baseURL);
        },
        methods:{
            getyanzhang(){
                if(this.yanzhnegma!="验证码"){
                    return
                }
                if(this.username==""){
                    return Toast({
                        message: "请填写登录信息",
                        position: 'center',
                        duration: 2000
                    });
                }
                if(!(/^1[3456789]\d{9}$/.test(this.username))){
                    return Toast({
                        message: '请输入正确的手机号码',
                        position: 'center',
                        duration: 2000
                    });
                }
                this.axios({
                    method: 'get',
                    url: this.common.baseURL + '/sendSmsCheckCode/'+this.username,
                    // url: '/login',
                    // url:'http://localhost:8001/apis/login',
                    data:this.qs.stringify({}),
                    withCredentials: true,
                }).then((response) => {
                    console.log(response);
                    let res = response.data;
                    if(res.code!=0){
                        return Toast({
                            message: res.message,
                            position: 'center',
                            duration: 2000
                        });
                    }
                    let code = 60;
                    this.yanzhnegma = code;
                    let daojishi = setInterval(()=>{
                        code--;
                        this.yanzhnegma = code;
                        if(code==0){
                            clearInterval(daojishi);
                            this.yanzhnegma = "验证码";
                        }
                    },1000)

                }).catch((error) => {
                    console.log(error);
                });
            },
            denglu(){
                if(this.username==""||this.password==""){
                    return Toast({
                        message: "请填写登录信息",
                        position: 'center',
                        duration: 2000
                    });
                }

                // if(this.username=="wjx"&&this.password=="123456"){
                //     this.$router.push({path: '/productList', query: {selected: "2"}})
                // }else{
                //     return Toast({
                //         message: "用户名密码错误",
                //         position: 'center',
                //         duration: 2000
                //     });
                // }

                this.axios({
                    method: 'post',
                    url: this.common.baseURL + '/login?checkCode='+this.password+'&mobile='+this.username,
                    // url: '/login',
                    // url:'http://localhost:8001/apis/login',
                    data:{},
                    withCredentials: true,
                }).then((response) => {
                    if(response.data.code==0){
                        let obj = {};
                        obj = response.data.data;
                        obj.token = response.data.message;
                        localStorage.hhrdata = JSON.stringify(obj)
                        this.$router.push({path: '/productList', query: {selected: "2"}})
                    }else{
                        Toast({
                            message: response.data.message,
                            position: 'center',
                            duration: 2000
                        });
                    }
                }).catch((error) => {
                    console.log(error);
                });
                //this.$router.push({path: '/productList', query: {navStatus: "2"}})
            }
        }
    }
</script>

<style scoped lang="less">
    .login {
        background: #fff;
        .backtop{
            overflow: hidden;
            margin: 1.5rem auto;
            img{
                width: 2.08rem;
                height: 2.08rem;
                display: block;
                margin: 0 auto;
            }
        }
        .backbox{
            height: 5.72rem;
            background: url("../img/login_back.png") center center no-repeat;
            background-size: 100% auto;
        }
        .lo_title{
            font-size:0.48rem;
            font-weight:500;
            color:rgba(38,119,249,1);
            text-align: center;
            margin:  0.46rem auto;
            letter-spacing: 0.1rem;
        }
        .form_li{
            height: 0.9rem;
            overflow: hidden;
            line-height: 0.9rem;
            margin: 0 0.75rem;
            border-bottom: 1px solid #e0e0e0;
            .icon_phone{
                background: url("../img/login_icon.png") center center no-repeat;
                background-size: 100%;
            }
            .icon_password{
                background: url("../img/login_icon1.png") center center no-repeat;
                background-size: 100%;
            }
            span{
                float: left;
                width: 0.42rem;
                height: 0.42rem;
                margin: 0.24rem 0.6rem 0 0;
            }
            input{
                float: left;
                width: 4.7rem;
                height: 0.6rem;
                margin: 0.15rem 0;
                line-height: 0.5rem;
                padding: 0 0.1rem;
                font-size: 0.32rem;
                border: 0;
            }
            .yanzheng{
                float: left;
                border: 1px solid #bebebe;
                border-radius: 0.3rem;
                text-align: -webkit-center;
                text-align: center;
                width: 1.9rem;
                height: 0.6rem;
                line-height: 0.6rem;
                color: #377cfe;
                cursor: pointer;
                margin-top: 0.13rem;
                background: #fff;
                padding: 0;
            }
        }
        .lo_btn{
            width:6rem;
            height:0.88rem;
            background:rgba(38,119,249,1);
            border-radius:0.44rem;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height: 0.88rem;
            text-align: center;
            cursor: pointer;
            margin:  0.9rem auto 0 auto;
        }
        .xieyibtn{
            padding: 0 0.9rem;
            text-align: right;
            font-size: 0.2rem;
            color: #020503;
            margin-top: 0.15rem;
            a{
                text-decoration: underline;
                cursor: pointer;
            }
        }
        .log_btm{
            width: 100%;
            height: 3.34rem;
            position: fixed;
            bottom: 0;
            left: 0;
            div{
                width: 7.5rem;
                height: 3.34rem;
                background: url("../img/loginbtm.png") 0 0 no-repeat;
                background-size: 7.5rem 3.34rem;
                margin: 0 auto;
            }
        }
    }
</style>
